<template>
	<view class="">
		<u-toast ref="uToast" />
		<u-navbar :is-back="true" title="写邮件" back-icon-color='#333333' height="50" :border-bottom="false">
			<view class="" style="margin-left: 600rpx; display: flex;align-content: center;">
				<image src="../../static/tupian89.png" mode="widthFix" style="width: 34rpx;" @click="addEmail(1)">
				</image>
			</view>
		</u-navbar>
		<u-select v-model="show" mode="single-column" :list="list" @confirm="confirm"></u-select>
		<view class="blank" style="width: 100%; height: 30rpx; background-color: #F0F0F0;">
		</view>
		<u-mask :show="display">
			<view class="warp">
				<view class="rect" @tap.stop>
					<view class="tanchu">
						确认保存到草稿箱?
					</view>
					<view class="anniu">
						<view class="" @click="display=false">
							取消
						</view>
						<view class="" @click="addEmail(2)">
							确定
						</view>
					</view>
				</view>
			</view>
		</u-mask>
		<view class="list">
			<view class="recipients">
				<text>收件人:</text>
				<input type="text" v-model="content" value="" />
				<text>抄送/密送</text>
				<image src="../../static/tupian90.png" mode="widthFix" style="width: 25rpx;"
					@click="$toLink('../select_person/select_person',{})"></image>
			</view>
			<view class="sender">
				<text>发件人:</text>
				<input type="text" value="" v-model="text" />
			</view>
			<view class="status">
				<text>状&nbsp;&nbsp;&nbsp;态:</text>
				<text>{{form.level}}</text>
				<text @click="show=true"></text>
			</view>
			<view class="theme">
				<text>主&nbsp;&nbsp;&nbsp;题:</text>
				<input type="text" value="" v-model="form.title" />
			</view>
		</view>
		<textarea class="comment" value="" v-model="form.content" placeholder="" />
		<view class="accessory" @click="openFile">
			<text>附件</text>
			<image src="../../static/tupian91.png" mode="widthFix" style="width: 26rpx;"></image>
			<text>{{uploadFile.join(',')}}</text>
		</view>
		<view class="draft">
			<view class="" @click="display=true">
				存草稿
			</view>
		</view>
		<tki-file-manager ref="filemanager" @result="resultPath"></tki-file-manager>
	</view>
</template>

<script>
	import request from '../../request.js'
	import tkiFileManager from "@/components/tki-file-manager/tki-file-manager.vue"
	export default {

		data() {
			return {
				text: 're呼呼<1233898@qq.com>',
				comment: '发自我的iPhone',
				content: "",
				form: {
					title: '',
					level: '',
					content: '',
					annx: '',
					is_temp: '',
					send_user_ids: '',
				},
				edit_form: {
					title: '',
					level: '',
					content: '',
					annx: '',
					is_temp: '',
					send_user_ids: '',
				},
				show: false,
				display: false,
				list: [{
						value: '1',
						label: '一般'
					},
					{
						value: '2',
						label: '紧急'
					},
					{
						value: '3',
						label: '重要'
					}
				],
				title: '',
				path: '',
				uploadFile: [],
				page_label: 1,
				delivery_obj:{},
			}
		},
		components: {
			tkiFileManager
		},
		onLoad(option) {
			if (option.id) {
				this.content = option.id;
			}
			if (option.selectUserId) {
				this.form.send_user_ids = option.selectUserId;
				this.edit_form.send_user_ids = option.selectUserId;
			}
			if (option.obj) {
				console.log('进来了吗')
				this.delivery_obj = JSON.parse(decodeURIComponent(option.obj));
				this.page_label = 2;
				if (this.delivery_obj.send_users) {
					let arr = this.delivery_obj.send_users.map(item => {
						return item.full_name;
					})
					this.content = arr.join(',');
				}
				if (this.delivery_obj.send_users) {
					let user_arr = this.delivery_obj.send_users.map(item => {
						return item.user_id;
					})
					this.edit_form.send_user_ids = user_arr.join(',');
				}
				this.form.level = this.delivery_obj.level;
				this.form.title = this.delivery_obj.title;
				this.form.content = this.delivery_obj.content;
				this.edit_form.level = this.delivery_obj.level;
				this.edit_form.title = this.delivery_obj.title;
				this.edit_form.content = this.delivery_obj.content;


			}
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.form.level = e[0].label;
				this.edit_form.level = e[0].label;
			},
			openFile() {
				let base_url = uni.getStorageSync('host');
				let _this = this;
				uni.chooseFile({
					count: 6, //默认9
					extension: ['.zip', '.doc'],
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						const uploadTask = uni.uploadFile({
							formData: {
								files: res.tempFilePaths[0],
							},
							url: base_url + 'system/files/uploadAnnx',
							filePath: res.tempFilePaths[0],
							name: 'files',
							success: function(res) {
								let list = JSON.parse(res.data);
								console.log(list.data);
								_this.uploadFile.push(list.data.url);

							}
						});
					}
				});
				// this.$refs.filemanager._openFile()
			},
			addEmail(param) {
				let base_url = uni.getStorageSync('host');
				console.log(base_url);
				this.form.annx = this.uploadFile.join(',');
				this.edit_form.annx = this.uploadFile.join(',');
				let _this = this;
				if (this.page_label == 1) {
					switch (param) {
						case 1:
							this.form.is_temp = 0;
							request({
								url: base_url + 'teacher/email/addEmail',
								method: 'post',
								data: {
									...this.form,
								},
								success(res) {
									if (res.statusCode == 200) {
										console.log(res.data.data);
										_this.$toLink('../email/email', {
											email_id: 0
										}, 2);
									} else {
										_this.$refs.uToast.show({
											title: res.data.message || '系统错误',
											type: 'warning',
										})
									}

								}
							})
							break;
						case 2:
							this.form.is_temp = 1;
							this.display = false;
							request({
								url: base_url + 'teacher/email/addEmail',
								method: 'post',
								data: {
									...this.form,
								},
								success(res) {
									if (res.statusCode == 200) {
										console.log(res.data.data);
										_this.$toLink('../email/email', {
											email_id: 2
										}, 2);
									} else {
										_this.$refs.uToast.show({
											title: res.data.message || '系统错误',
											type: 'warning',
										})
									}

								}
							})
							break;
					}
				} else {
					this.edit_form.title = this.form.title;
					this.edit_form.content = this.form.content;
					switch (param) {
						case 1:
							this.edit_form.is_temp = 0;
							request({
								url: base_url + 'teacher/email/updateEmail',
								method: 'post',
								data: {
									...this.edit_form,
								},
								success(res) {
									if (res.statusCode == 200) {
										console.log(res.data.data);
										_this.$toLink('../email/email', {
											email_id: 0
										}, 2);
									} else {
										_this.$refs.uToast.show({
											title: res.data.message || '系统错误',
											type: 'warning',
										})
									}

								}
							})
							break;
						case 2:
							this.edit_form.is_temp = 1;
							this.display = false;
							request({
								url: base_url + 'teacher/email/updateEmail',
								method: 'post',
								data: {
									...this.edit_form,
								},
								success(res) {
									if (res.statusCode == 200) {
										console.log(res.data.data);
										_this.$toLink('../email/email', {
											email_id: 2
										}, 2);
									} else {
										_this.$refs.uToast.show({
											title: res.data.message || '系统错误',
											type: 'warning',
										})
									}

								}
							})
							break;
					}
				}


			},

			// resultPath(e) {
			// 	this.path = e;
			// 	console.log(this.path);
			// }
		}
	}
</script>

<style lang="scss">
	.warp {
		display: flex;
		align-items: flex-start;
		justify-content: center;
		height: 100%;

		.rect {
			margin-top: 450rpx;
			border-radius: 10rpx;
			width: 480rpx;
			height: 250rpx;
			background-color: #fff;

			.tanchu {
				width: 100%;
				height: 150rpx;
				font-size: 33rpx;
				color: #3E3E3E;
				text-align: center;
				line-height: 150rpx;
			}

			.anniu {
				width: 100%;
				height: 100rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;

				view {
					border-radius: 30rpx;
					width: 150rpx;
					height: 60rpx;
					text-align: center;
					line-height: 60rpx;
					font-size: 26rpx;

					&:nth-child(1) {
						color: #2C78FE;
						margin-left: 15rpx;
						border: 1px solid #2C78FE;
						background: #fff;

					}

					&:nth-child(2) {
						color: #fff;
						margin-right: 15rpx;
						background: linear-gradient(to right, #2C78FE, #32B0FF);
					}


				}
			}
		}
	}

	.list {
		width: 100%;
		background: #fff;

		.recipients {
			width: 710rpx;
			margin-left: 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid #F2F2F2;
			height: 86rpx;

			text {
				color: #999999;
				font-size: 28rpx;

				&:nth-child(1) {
					margin-left: 25rpx;
				}

				&:nth-child(3) {
					font-size: 22rpx;
					margin-left: 10rpx;
				}

			}

			input {
				&:nth-child(2) {
					width: 400rpx;
					outline: none;
					border: none;
					color: #333333;
					font-size: 28rpx;
				}
			}

			image {
				&:nth-child(4) {
					margin-left: 40rpx;
				}
			}
		}

		.sender {
			width: 710rpx;
			margin-left: 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid #F2F2F2;
			height: 86rpx;

			text {
				&:nth-child(1) {
					color: #999999;
					font-size: 28rpx;
					margin-left: 25rpx;
				}

			}

			input {
				&:nth-child(2) {
					text-indent: 1em;
					color: #333333;
					font-size: 28rpx;
					width: 400rpx;
					outline: none;
					border: none;
				}
			}
		}

		.status {
			width: 710rpx;
			margin-left: 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid #F2F2F2;
			height: 86rpx;

			text {
				font-size: 28rpx;

				&:nth-child(1) {
					margin-left: 25rpx;
					color: #999999;
				}

				&:nth-child(2) {
					margin-left: 30rpx;
					color: #333333;
					width: 60rpx;
				}

				&:nth-child(3) {
					margin-left: 30rpx;
					margin-top: 20rpx;
					width: 0rpx;
					height: 0rpx;
					border-width: 17rpx 17rpx 17rpx 17rpx;
					border-color: #ccc transparent transparent transparent;
					border-style: solid;
				}
			}
		}

		.theme {
			width: 710rpx;
			margin-left: 20rpx;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			border-bottom: 1rpx solid #F2F2F2;
			height: 86rpx;

			text {
				&:nth-child(1) {
					margin-left: 25rpx;
					color: #999999;
					font-size: 28rpx;

				}
			}

			input {
				&:nth-child(2) {
					margin-left: 30rpx;
					width: 400rpx;
					outline: none;
					color: #333333;
					font-size: 28rpx;
					border: none;
				}
			}
		}
	}

	.comment {
		margin-top: 34rpx;
		text-indent: 1.2em;
		width: 710rpx;
		outline: none;
		border: none;
		color: #333333;
		font-size: 28rpx;
		margin-left: 20rpx;
		border-bottom: 1rpx solid #F2F2F2;
		height: 186rpx;
	}

	.accessory {
		width: 710rpx;
		margin-left: 20rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		border-bottom: 1rpx solid #F2F2F2;
		height: 78rpx;

		text {
			&:nth-child(1) {
				color: #999999;
				margin-left: 25rpx;
				font-size: 28rpx;
			}

			&:nth-child(3) {
				color: #999999;
				margin-left: 15rpx;
				width: 500rpx;
				font-size: 28rpx;
				overflow: hidden;
			}
		}

		image {
			&:nth-child(2) {
				margin-left: 35rpx;
			}
		}
	}

	.draft {
		width: 100%;
		height: 164rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		view {
			&:nth-child(1) {
				width: 200rpx;
				height: 60rpx;
				border-radius: 50rpx;
				text-align: center;
				line-height: 60rpx;
				background: linear-gradient(to right, #2C78FE, #32B0FF);
				color: #fff;
				font-size: 30rpx;
			}
		}
	}
</style>
